<template>
  <view class="scrap-list-page">
    <view
      class="scrap-card"
      v-for="(item, index) in scrappingList"
      :key="index"
    >
      <view class="card-header">
        <view class="status-tag" :class="getStatusClass(item.scrap_status)">
          {{ item.scrap_status_name || '审核通过' }}
        </view>
        <view class="bill-code">{{ item.scrap_code }}</view>
      </view>
      
      <!-- 报废单名称 -->
      <view class="info-section">
        <view class="info-row">
          <text class="info-label">报废单名称</text>
          <text class="info-value">{{ item.scrap_name || '资产报废' }}</text>
        </view>
      </view>
      
      <!-- 资产名称和报废人 -->
      <view class="info-grid">
        <view class="grid-item">
          <text class="info-label">资产名称</text>
          <text class="info-value">{{ getAssetNames(item) }}</text>
        </view>
        <view class="grid-item">
          <text class="info-label">报废人</text>
          <text class="info-value">{{ item.scrap_user_name }}</text>
        </view>
      </view>
      
      <!-- 报废日期和报废原因 -->
      <view class="info-grid">
        <view class="grid-item">
          <text class="info-label">报废日期</text>
          <text class="info-value">{{ formatDate(item.fm_creation_time) }}</text>
        </view>
        <view class="grid-item">
          <text class="info-label">报废原因</text>
          <text class="info-value">{{ item.scrap_reason_name }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-row">
        <up-button 
          type="primary" 
          plain 
          size="large"
          text="详情"
          @click="goToDetail(item)"
          :customStyle="btnStyle"
        ></up-button>
        
        <up-button 
          type="primary" 
          plain 
          size="large"
          text="审核记录"
          @click="viewAuditRecord(item)"
          :customStyle="btnStyle"
        ></up-button>
        
        <!-- 待审核或驳回状态：修改、删除 -->
        <up-button 
          v-if="canEdit(item)"
          type="warning" 
          plain 
          size="large"
          text="修改"
          @click="editItem(item)"
          :customStyle="btnStyle"
        ></up-button>
        
        <!-- 待审核状态：审核 -->
        <up-button 
          v-if="canAudit(item)"
          type="success" 
          size="large"
          text="审核"
          @click="auditItem(item)"
          :customStyle="{...btnStyle, background: '#19be6b', color: '#fff'}"
        ></up-button>
        
        <!-- 待审核或驳回状态：删除 -->
        <up-button 
          v-if="canDelete(item)"
          type="error" 
          plain 
          size="large"
          text="删除"
          @click="deleteItem(item)"
          :customStyle="btnStyle"
        ></up-button>
        
        <!-- 审核通过状态：反审 -->
        <up-button 
          v-if="item.scrap_status === 'APPROVED'"
          type="warning" 
          plain 
          size="large"
          text="反审"
          @click="onUnAudit(item)"
          :customStyle="btnStyle"
        ></up-button>
      </view>
    </view>
    
    <view class="empty" v-if="!scrappingList || scrappingList.length === 0">
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';
import http from "@/api/request";

const props = defineProps({
  scrappingList: {
    type: Array,
    default: () => []
  }
});

// 按钮样式
const btnStyle = {
  flex: 1,
  minWidth: '150rpx',
  height: '90rpx',
  fontSize: '34rpx',
  margin: '0 10rpx',
  borderRadius: '12rpx'
}

// 获取资产名称列表
const getAssetNames = (item) => {
  if (item.assetScrapDets && item.assetScrapDets.length > 0) {
    return item.assetScrapDets.map(asset => asset.asset_name).join('、');
  }
  return '请至详情查看';
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 'PENDING_REVIEW':
      return 'status-pending';
    case 'APPROVED':
      return 'status-approved';
    case 'REJECTED':
      return 'status-rejected';
    default:
      return 'status-other';
  }
};

// 跳转到详情页
const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/assetScrapping/detail?scrapCode=${item.scrap_code}`
  });
};

// 查看审核记录
const viewAuditRecord = (item) => {
  uni.navigateTo({
    url: `/pages/assetScrapping/auditRecord?scrapCode=${item.scrap_code}`
  });
};

// 审核
const auditItem = (item) => {
  uni.navigateTo({
    url: `/pages/assetScrapping/detail?scrapCode=${item.scrap_code}&mode=audit`
  });
};

// 修改
const editItem = (item) => {
  uni.navigateTo({
    url: `/pages/assetScrapping/add?scrapCode=${item.scrap_code}`
  });
};

// 删除
const deleteItem = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该报废单吗？',
    cancelText: '取消',
    confirmText: '确定',
    success: (res) => {
      if (res.confirm) {
        http.post('/api/module/Invoke', {
          pageCode: 'assetscrapping',
          params: {
            args: [
              {
                name: 'interfaceCode',
                value: 'assetscrapping.softDeleteAssetScrapOrder'
              },
              {
                name: 'scrapCode',
                value: item.scrap_code
              }
            ]
          },
          methodName: 'softDeleteAssetScrapOrder'
        }).then(res => {
          if (res.isSuccess) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            setTimeout(() => {
              uni.$emit('data-changed');
            }, 1000);
          } else {
            uni.showToast({
              title: res.error || '删除失败',
              icon: 'none'
            });
          }
        }).catch(err => {
          console.error('删除失败:', err);
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          });
        });
      }
    }
  });
};

// 反审功能
const onUnAudit = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要反审该报废单吗？',
    cancelText: '取消',
    confirmText: '确定',
    success: function (res) {
      if (res.confirm) {
        http.post('/api/module/Invoke', {
          pageCode: "assetscrapping",
          params: {
            args: [
              {
                name: "interfaceCode",
                value: "assetscrapping.approveAssetScrapOrder"
              },
              {
                name: "scrapCode",
                value: item.scrap_code
              },
              {
                name: "auditState",
                value: "PENDING_REVIEW"
              }
            ]
          },
          methodName: "approveAssetScrapOrder"
        }).then(res => {
          if (res.isSuccess) {
            uni.showToast({
              title: '反审成功',
              icon: 'success'
            });
            uni.$emit('data-changed');
          } else {
            uni.showToast({
              title: res.error || '反审失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
};

// 根据状态判断是否可以审核
const canAudit = (item) => {
  return item.scrap_status === 'PENDING_REVIEW';
};

// 根据状态判断是否可以修改
const canEdit = (item) => {
  return item.scrap_status === 'PENDING_REVIEW' || item.scrap_status === 'REJECTED';
};

// 根据状态判断是否可以删除
const canDelete = (item) => {
  return item.scrap_status === 'PENDING_REVIEW' || item.scrap_status === 'REJECTED';
};
</script>

<style lang="scss" scoped>
.scrap-list-page {
  padding: 20rpx;
}

.scrap-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
  color: #fff;
  
  &.status-approved {
    background-color: #1890ff;
  }
  
  &.status-rejected {
    background-color: #fa541c;
  }
  
  &.status-pending {
    background-color: #722ed1;
  }
  
  &.status-other {
    background-color: #666;
  }
}

.bill-code {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.info-section {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
  
  .info-label {
    width: 140rpx;
    font-size: 28rpx;
    color: #666;
  }
  
  .info-value {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }
}

.info-grid {
  display: flex;
  margin-bottom: 20rpx;
}

.grid-item {
  flex: 1;
  
  .info-label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
  }
}

/* 操作按钮容器样式 */
.action-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid #f0f0f0;
  gap: 20rpx;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  color: #999;
  font-size: 28rpx;
}
</style>